<template>
  <div>
    <!-- <div class="icons">
      <download color="#fff" @click="downLoad" />
    </div> -->
    <nut-swiper :init-page="page" :pagination-visible="true" pagination-color="#426543" auto-play="3000"
      @change="onChange">
      <nut-swiper-item v-for="item in list" :key="item">
        <img :src="item" mode="aspectFit" alt="" />
      </nut-swiper-item>
      <template #page>
        <div class="swiper-pagination"> {{ val }}/{{ list.length }} </div>
      </template>
    </nut-swiper>
  </div>
</template>

<script lang="ts">
import Taro, { useRouter } from '@tarojs/taro';
import { Download } from '@nutui/icons-vue-taro';
import mitt from "./../../../../utils/mitt";
import { reactive, toRefs, onMounted, ref } from 'vue';
import { getTaoBaoqQRCodeONApp, getDetailNo, getDetail } from '../../../../api/index'
export default {
  components: {
    Download
  },
  setup() {
    const state = reactive({
      page: 2,
      list: [],
      data: {},
      goodsId: '',
      val: 1,
    });
    onMounted(() => {
      // mitt.on("detail", (val) => {
      //   state.list = val.goodsCarouselList
      //   state.data = val
      // })
      const router = useRouter();
      if (router.params.scene) {
        getProductDetail(router.params.scene.split('%26')[0].split('%3D')[1])
      }
      if (router.params.goodsId) {
        getProductDetail(router.params.goodsId)
      }
    });
    const downLoad = () => {
      getTaoBaoqQRCodeONApp({
        goodsId: state.data.goodsId,
        goodsCoverImg: state.data.goodsCoverImg,
        originalPrice: state.data.originalPrice,
        sellingPrice: state.data.sellingPrice,
        goodsName: state.data.goodsName,
      }).then(res => {
        Taro.downloadFile({
          url: res,
          success: function (res) {
            if (res.statusCode === 200) {
              Taro.saveImageToPhotosAlbum({
                filePath: res.tempFilePath,
                success: function (res) {
                  Taro.showToast({
                    title: '已保存到相册',
                    icon: 'success',
                    duration: 2000
                  })
                }
              })
            }
          }
        })
      })
    }
    const getProductDetail = (id) => {
      Taro.getStorage({
        key: 'token',
        success: function (res) {
          getDetail(id).then(res => {
            if (res.resultCode == 200) {
              state.list = res.data.goodsCarouselList
              console.log("444444444444")
              console.log(state.list)
              console.log(state.list[0])
              state.data = res.data
            }
          })
        },
        fail: function (rej) {
          getDetailNo(id).then(res => {
            if (res.resultCode == 200) {
              state.list = res.data.goodsCarouselList
              state.data = res.data
            }
          })
        }
      })
    };
    const onChange = (index) => {
      state.val = index + 1
    }
    return { ...toRefs(state), downLoad, onChange, getProductDetail };
  }
};
</script>
<style lang="scss">
.nut-swiper-item {
  line-height: 400px;

  img {
    width: 100%;
    height: 100%;
    background: #fff;
  }
}

.icons {
  position: fixed;
  top: 0;
  width: 100%;
  height: 50rpx;
  z-index: 999;
  text-align: right;
  margin-top: 10rpx;

  .nut-icon {
    padding: 10rpx;
    border-radius: 50%;
    background: rgba($color: #000000, $alpha: 0.1);
    margin-right: 20rpx;
  }
}

.swiper-pagination {
  position: absolute;
  bottom: 40rpx;
  right: 20rpx;
  width: 46px;
  height: 22px;
  background: rgba(0, 0, 0, 0.33);
  border-radius: 22px;
  text-align: center;
  color: #fff;
  font-size: 14px;
}
</style>